<template>
	<view class="msg_info">
		<img :src="item.map_image" alt="" class="img" />
		<view class="wrap">
			<view class="name">{{ item.goods_title }}</view>
			<!-- <view class="tipsB">武商梦时代·服务站</view> -->
			<view class="b">
				<view class="price">
					<view class="p1">￥{{ item.xj_sprice }}</view>
				</view>
				<view class="number">数量：{{ item.nums }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'shopInfo',
	data() {
		return {};
	},
	props: ['item']
};
</script>

<style lang="scss" scoped>
.msg_info {
	display: flex;
	padding: 32rpx 0;
	border-top: 2rpx solid rgba(238, 238, 238, 1);
	.img {
		width: 168rpx;
		height: 168rpx;
	}
	.wrap {
		height: 168rpx;
		margin-left: 20rpx;
		width: 60%;
		position: relative;
		.name {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			display: -webkit-box; /* 兼容旧版浏览器 */
			-webkit-line-clamp: 2; /* 显示两行 */
			-webkit-box-orient: vertical; /* 子元素在垂直方向排列 */
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.tipsB {
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			margin-top: 16rpx;
		}
		.b {
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			.price {
				display: flex;
				align-items: flex-end;
				.p1 {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(246, 83, 50, 1);
				}
				.p2 {
					font-size: 20rpx;
					font-weight: 400;
					text-decoration-line: line-through;
					color: rgba(153, 153, 153, 1);
					margin-left: 10rpx;
				}
			}
			.number {
				font-size: 22rpx;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
			}
		}
	}
}
</style>
